<template>
  <div class="bg full-height full-width">
    <div class="backIcon" @click="backFun()"><i slot="icon" class="iconfont icon-cc-home"></i></div>
    <div v-transfer-dom>
      <confirm v-model="showShare" :show-cancel-button="false" title="提示" @on-confirm="onConfirm">
        <p class="txtCenter">请点击右上角进行分享</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <x-dialog
        v-model="showDialogStyle"
        hide-on-blur
        :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent',display:'flex','justify-content':'center','align-items':'center'}"
      >
        <div class="voteSuccess flex-v">
          <span class="voteSuccess_title">投票成功</span>
          <span class="voteSuccess_content">
            当前
            <p>{{this.voteNums}}</p>票
          </span>
          <div class="voteSuccess_button" @click="showDialogStyle=false">
            <span>关闭</span>
          </div>
        </div>
      </x-dialog>
    </div>
    <toast v-model="isVote" :time="1500" type="cancel" width="50%" position="middle">您今天已经投过票了</toast>
    <toast v-model="isClose" :time="1500" type="cancel" width="50%" position="middle">活动已经结束</toast>
    <toast v-model="isStart" :time="1500" type="cancel" width="50%" position="middle">活动暂未开始</toast>
    <div class="mt0">
      <div class="imgBorderHead">
        <img :src="this.$DEV_ENV_API+'/api/'+item.cover" class="headImgHead">
        <!--          <img class="full-height full-width" :src='$DEV_ENV_API+"/api/"+item.cover'>-->
      </div>
      <!--        <div class="cover">-->

      <!--        </div>-->
      <div class="name mt10">{{item.name}}</div>
      <div class="name mt5">
        <div class="mr10">{{item.candidateId}}号选手</div>
        <div class="mr10">{{item.age}}岁</div>
        <div class="mr10">{{item.votesNum}}票</div>
      </div>
      <div class="name mt5">{{item.className}}</div>
      <div class="vote mt15" @click="vote(item)">
        <img class="full-width full-height" :src="!item.isVote?voteImg:isVoteImg">
        <div class="voteFont">给TA投票</div>
      </div>
      <div class="vote mt20 mb30" @click="shareToFriend(item)">
        <img class="full-width full-height" :src="voteImg">
        <div class="shareFont">分享</div>
      </div>
      <div v-for="(photo,index) in item.photos" :key="index" class="photo mb15">
        <img class="full-height full-width" :src="$DEV_ENV_API+'/api/'+photo">
      </div>
    </div>
    <div class="footer">
       <img src="../assets/activityIn/code.jpg" alt="">
       <div class="f-01">关注“艺星舞蹈生活馆”</div> 
    </div>
    <div class="footer02">有技术服务需求，请联系微信：wx12231626</div>
     <br><br><br><br>
  </div>
</template>
<script>
import {
  Confirm,
  XDialog,
  Toast,
  TransferDomDirective as TransferDom
} from "vux";
import WechatService from "../assets/js/WechatService";
export default {
  name: "detail",
  directives: {
    TransferDom
  },
  components: {
    Confirm,
    XDialog,
    Toast
  },
  data() {
    return {
      item: {},
      voteImg: require("../assets/home/tp_button@3x.png"),
      isVoteImg: require("../assets/home/tp1_icon@3x.png"),
      isVoteToday: false,
      showShare: false,
      showDialogStyle: false,
      isVote: false,
      voteNums: 1,
      isClose: false,
      isStart: false
    };
  },
  methods: {
    vote(item, index) {
      let activityStatus = sessionStorage.getItem("activityStatus");
      if (this.isVoteToday == true) {
        this.isVote = true;
      } else if (activityStatus == 0) {
        this.isStart = true;
      } else if (activityStatus == -1) {
        this.isClose = true;
      } else {
        let openID = sessionStorage.getItem("openid");
        let param = new Object();
        param.openId = openID;
        param.candidateId = item.candidateId;
        let postParam = JSON.stringify(param);
        let that = this;
        this.$http
          .post(this.$DEV_ENV_API + "/api/postVotes", postParam)
          .then(res => {
            if (res.data.code == "1") {
              that.showDialogStyle = true;
              that.item.votesNum = parseInt(this.item.votesNum) + 1;
              that.voteNums = this.item.votesNum;
              item.isVote = true;
            } else {
              that.isVote = true;
              item.isVote = true;
              that.isVoteToday = true;
            }
          })
          .catch(err => {});
      }
    },
    shareSuccess() {},
    onConfirm() {
      console.log("confirm");
    },
    shareToFriend(item) {
      this.showShare = true;
    },
    backFun(){
      this.$router.push({ path: "/home" });
    },
    wxConfig() {
      let url = this.$DEV_ENV_API + "/api/public/yixing/index.html?type=1";
      this.$http
        .get(this.$DEV_ENV_API + "/api/getSignature", {
          params: {
            url: location.href.split("#")[0]
          }
        })
        .then(res => {
          WechatService.shareConfig.imgUrl = encodeURI(
            this.$DEV_ENV_API + "/api/" + this.item.cover
          );
          WechatService.shareConfig.title = "艺星舞蹈-人气明星评选";
          WechatService.shareConfig.desc =
            "大家好,我是" +
            this.item.candidateId +
            "号选手" +
            this.item.name +
            ",正在参加【人气明星】投票活动，请各位为我投上宝贵的一票!";
          WechatService.shareConfig.link =
            "https://www.babywit.club/api/public/yixing/index.html?type=1&candidateId=" +
            this.item.candidateId;
          WechatService.config(res.data.data, function(res) {
            WechatService.showShareMenu();
            WechatService.shareToAppMsg();
            WechatService.shareToTimeline();
          });
        })
        .catch(err => {});
    }
  },
  mounted() {
    if (this.$route.meta.newOne == false) {
      // let candidateId = "1";
      let candidateId = this.$route.params.candidateId;
      let param = new Object();
      param.candidateId = candidateId;
      let that = this;
      this.$http
        .get(this.$DEV_ENV_API + "/api/getCandidateById", {
          params: {
            candidateId: candidateId
          }
        })
        .then(res => {
          // console.log(res.data.data);
          this.item = res.data.data;
          this.wxConfig();
        })
        .catch(err => {});
    } else {
      this.item = this.$route.params.data;
      this.wxConfig();
    }
  }
};
</script>

<style scoped>
.bg {
  background: url("../assets/home/BJ@3x.png") no-repeat;
  background-size: 100%;
  padding-top: 15px;
  /* display: flex;
    flex-direction: column;
    align-items: center; */
  background-attachment: scroll;
  -webkit-overflow-scrolling: touch;
}
/* .imgBorderHead {
  border-radius: 20px;
  background: #09808f;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
} */
.headImgHead {
  width: 100%;
  border-radius: 20px;
  margin: 2px;
  border: 3px solid #09808f;
  object-fit: cover;
}
.backIcon{
   width: 40px;
   height: 40px;
   color:rgb(243,142,200);
   background-color:rgba(243,142,200,0.4);
   border-radius:50%;
   position: fixed;
   bottom: 20px;
   right: 15px;
   z-index: 9999;
   display:flex;
   justify-content:center;
   align-items:center;
}
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}
.cover {
  /*margin-top: 280px;*/
  width: 175px;
  height: 180px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.name {
  color: #5c5c5c;
  font-size: 13px;
  display: flex;
  font-family: PingFang-SC-Regular;
  align-items: center;
  flex-shrink: 0;
}
.mt0 {
  background-color: #ffffff;
  margin: 0 15px 15px 15px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 15px;
}

.mt10 {
  margin-top: 10px;
}
.mt5 {
  margin-top: 5px;
}
.mt15 {
  margin-top: 15px;
}
.mr10 {
  margin-right: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb15 {
  margin-bottom: 15px;
}
.vote {
  display: flex;
  width: 167px;
  height: 47px;
  position: relative;
  flex-shrink: 0;
}
.voteFont {
  position: absolute;
  top: 14px;
  left: 54px;
  font-size: 14px;
  color: #ffffff;
  font-family: PingFang-SC-Semibold;
}
.shareFont {
  position: absolute;
  top: 14px;
  left: 68px;
  font-size: 14px;
  color: #ffffff;
  font-family: PingFang-SC-Semibold;
}
.photo {
  width: 85%;
  /*height: 300px;*/
  display: flex;
  flex-shrink: 0;
}
.txtCenter {
  text-align: center;
  font-size: 14px;
}
.voteSuccess {
  width: 270px;
  height: 198px;
  background-image: url("../assets/home/tp_bj@2x.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.voteSuccess_title {
  color: #ffffff;
  font-size: 28px;
  line-height: 20px;
  margin-top: 50px;
}
.voteSuccess_content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
}
.voteSuccess_content > p {
  color: #ffef89;
  font-size: 14px;
}
.voteSuccess_button {
  width: 80px;
  height: 47px;
  background-image: url("../assets/home/tp_button@3x.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.voteSuccess_button > span {
  width: 28px;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  line-height: 20px;
}
.footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 20px;
  font-size:14px;
  color: #09808f;
}
.footer img{
  width: 50%;
  margin-top: 20px;
}
.f-01{
  margin-top: 20px;
}
.footer02{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 80px;
  padding-top: 20px;
  color: #999999;
  font-size:12px;
}
</style>
